﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/hiprint.css" rel="stylesheet" />
    <link href="css/print-lock.css" rel="stylesheet" />

    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <script src="./plugins/jquery.min.js"></script>
    <script src="../static/axios.js"></script>
    <style>
        .layout {
            display: flex !important;
        }

        .ModelClass {
            margin-left: 50px;
        }

        .ModelClass1 {
            margin-top: 20px;
        }

        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            width: 400px;
            height: 300px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }

        #popup-div {
            width: 100%;
            height: 13%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #popup-div2 {
            width: 100%;
            height: 15%;
            display: flex;
        }

        #close-button {
            width: 20%;
            text-align: left;
        }

        #popup h2,
        #popup p {
            margin-top: 0;
        }

        #close-button:hover {
            color: #0052a3;
            cursor: pointer;
        }

        /* 模态背景 */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9998;
            display: none;
        }
    </style>

</head>

<body>
    <layout class="layout hinnn-layout hinnn-layout-has-sider height-100-per" style="background:#fff;">


        <content class="hinnn-layout-content" style="border-left:1px solid #e8e8e8;">
            <div class="container-fluid height-100-per print-content">

                <div class="row">
                    <div class="col-sm-12">
                        <div class="row">
                            <div class="col-sm-3 col-md-2" style="padding-right:0px;">

                                <div class="rect-printElement-types hiprintEpContainer">
                                    <ul class="hiprint-printElement-type">

                                        <li>
                                            <span class="title"><code>拖拽列表</code></span>
                                            <ul>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.text" style="">

                                                        <span class="glyphicon glyphicon-text-width"
                                                            aria-hidden="true"></span>
                                                        <span class="glyphicon-class">文本</span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.image" style="">
                                                        <span class="glyphicon glyphicon-picture"
                                                            aria-hidden="true"></span>
                                                        <span class="glyphicon-class">图片</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.longText">
                                                        <span class="glyphicon glyphicon-subscript"
                                                            aria-hidden="true"></span>
                                                        <span class="glyphicon-class">长文</span>


                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.tableCustom" style="">
                                                        <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
                                                        <span class="glyphicon-class">表格</span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.html">
                                                        <span class="glyphicon glyphicon-header"
                                                            aria-hidden="true"></span>
                                                        <span class="glyphicon-class">html</span>
                                                    </a>
                                                </li>

                                            </ul>
                                        </li>
                                        <li>
                                            <span class="title">辅助</span>
                                            <ul>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.hline" style="">

                                                        <span class="glyphicon glyphicon-resize-horizontal"
                                                            aria-hidden="true"></span>
                                                        <span class="glyphicon-class">横线</span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.vline" style="">
                                                        <span class="glyphicon glyphicon-resize-vertical"
                                                            aria-hidden="true"></span>
                                                        <span class="glyphicon-class">竖线</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.rect">
                                                        <span class="glyphicon glyphicon-unchecked"
                                                            aria-hidden="true"></span>
                                                        <span class="glyphicon-class">矩形</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="ep-draggable-item" tid="testModule.oval">
                                                        <span class="glyphicon glyphicon-record"
                                                            aria-hidden="true"></span>
                                                        <span class="glyphicon-class">椭圆</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>

                            </div>
                            <div class="col-sm-9 col-md-10">
                                <div class="hiprint-toolbar" style="margin-top:15px;">
                                    <ul>
                                        <!-- <li><a class="hiprint-toolbar-item" onclick="setPaper('A3')">A3</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('A4')">A4</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('A5')">A5</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B3')">B3</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B4')">B4</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="setPaper('B5')">B5</a></li> -->

                                        <li><a class="hiprint-toolbar-item"><input type="text" id="customWidth"
                                                    style="width: 50px;height: 19px;border: 0px;"
                                                    placeholder="宽/mm" /></a></li>
                                        <li><a class="hiprint-toolbar-item"><input type="text" id="customHeight"
                                                    style="width: 50px;height: 19px;border: 0px;"
                                                    placeholder="高/mm" /></a></li>

                                        <li><a class="hiprint-toolbar-item"
                                                onclick="setPaper($('#customWidth').val(),$('#customHeight').val())">自定义</a>
                                        </li>
                                        <li><a class="hiprint-toolbar-item" onclick="rotatePaper()">旋转</a></li>
                                        <li><a class="hiprint-toolbar-item" onclick="clearTemplate()">清空</a></li>

                                        <!-- <li>
                                            <a class="btn hiprint-toolbar-item "
                                                style="color: #fff;background-color: #d9534f;border-color: #d43f3a;"
                                                id="A4_preview">快速预览</a>
                                        </li> -->
                                        <li>
                                            <a id="A4_directPrint" class="btn hiprint-toolbar-item "
                                                style="color: #fff;background-color: #d9534f;border-color: #d43f3a;">打印</a>
                                        </li>
                                        <li>
                                            <a class="btn btn-primary" id="A4_getJson_toTextarea">保存模版</a>
                                        </li>
                                        <!-- <li>
                                            <a class="btn btn-primary" id="A4_getJson_toDesign">数据转模版</a>
                                        </li> -->
                                        <!-- <button type="button" class="btn btn-primary" id="A4_getJson_toTextarea">保存模版</button>
                                        <button type="button" class="btn btn-primary" id="A4_getJson_toDesign">数据转模版</button> -->
                                    </ul>
                                    <div style="clear:both;"></div>
                                </div>
                                <div id="hiprint-printTemplate" class="hiprint-printTemplate" style="margin-top:20px;">

                                </div>
                                <!-- <div style="padding-top:15px;height: 120px;">
                                    <button type="button" class="btn btn-primary" id="A4_getJson_toTextarea">生成json到textarea</button>
                                    <button type="button" class="btn btn-primary" id="A4_getJson_toDesign">生成打印设计 json to 模板</button>
                                </div> -->
                                <!-- <div class="hinnn-callout hinnn-callout-danger">

                                    <p><code>可视化</code>结果以Json的形式存在，用户可以<code>编辑Json</code>实现特殊化操作，如：数据<code>formatter</code>，<code>文本变色</code>,单元格<code>改变背景</code>等。
                                    </p>
                                </div>
                                <textarea class="form-control" rows="10" id="A4_textarea_json"></textarea> -->
                                <!-- <div style="padding:15px 0;">
                                    <button type="button" class="btn btn-danger" id="A4_getHtml_toTextarea">生成html到textarea</button>
                                </div>

                                <textarea class="form-control" rows="10" id="A4_textarea_html"> -->

                                </textarea>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </content>
        <sider class="hinnn-layout-sider" style="">
            <div class="container height-100-per" style="width:250px;">
                <div class="row">
                    <div class="col-sm-12">
                        <div id="PrintElementOptionSetting" style="margin-top:10px;"></div>
                    </div>
                </div>
            </div>


        </sider>
        <div class="ModelClass">
            <div class="ModelClass1">模版名称:<input type="text" id="inptText1"></div>
            <div class="ModelClass1">客户名称:<input type="text" id="inptText2"></div>
        </div>
    </layout>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document" style="width: 825px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">打印预览</h4>
                </div>

                <div class="modal-body">
                    <button type="button" class="btn btn-danger" id="A4_printByHtml">打印</button>
                    <div class="prevViewDiv"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                </div>
            </div>
        </div>
    </div>
    <div id="popup">
        <div id="popup-div">
            <div id="close-button" onclick="closeButton1(this)" data-id="planOrderCode" data-text="织布单号">织布单号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="customOrderNo" data-text="客户订单号">客户订单号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="customName" data-text="客户名称">客户名称</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="pieceWeight" data-text="公斤/匹">公斤/匹</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="pieceNum" data-text="匹数">匹数</div>
        </div>
        <div id="popup-div">
            <div id="close-button" onclick="closeButton1(this)" data-id="weaveCode" data-text="织造序号">织造序号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="greyCode" data-text="坯布编号">坯布编号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="greyName" data-text="坯布名称">坯布名称</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="greyBatchNo" data-text="坯布批号">坯布批号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="yarnCount" data-text="纱支">纱支</div>
        </div>
        <div id="popup-div">
            <div id="close-button" onclick="closeButton1(this)" data-id="brandName" data-text="纱牌">纱牌</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="yarnBatch" data-text="纱批">纱批</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="customProductName" data-text="品名">品名</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="customNameRaw" data-text="供应商名称">供应商名称</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="drawnNeedleState" data-text="抽针">抽针</div>
        </div>
        <div id="popup-div">
            <div id="close-button" onclick="closeButton1(this)" data-id="workDrum" data-text="针筒">针筒</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="typeDate" data-text="开幅">开幅</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="width" data-text="门幅">门幅</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="weight" data-text="克重">克重</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="colorName" data-text="颜色">颜色</div>
        </div>
        <div id="popup-div">
            <div id="close-button" onclick="closeButton1(this)" data-id="machineCode" data-text="机台号">机台号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="areaInfo" data-text="机位号">机位号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="outSouringCompany" data-text="加工单位">加工单位</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="verifyClothCompany" data-text="验布单位">验布单位</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="orderDepartment" data-text="下单部门">下单部门</div>
        </div>
        <div id="popup-div">
            <div id="close-button" onclick="closeButton1(this)" data-id="rubberTube" data-text="胶管">胶管</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="startHorseNo" data-text="开始匹号">开始匹号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="auditDate" data-text="审核日期">审核日期</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="recordCode" data-text="记录单号">记录单号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="endHorseNo" data-text="结束匹号">结束匹号</div>
        </div>
        <div id="popup-div">
            <div id="close-button" onclick="closeButton1(this)" data-id="auditPerson" data-text="审核人">审核人</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="horseNo" data-text="匹号">(*必填)匹号</div>
            <div style="width: 25%;" id="close-button" onclick="closeButton1(this)" data-id="machineGreyCode"
                data-text="机布号">
                (*必填)机布号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="clothfiyCode" data-text="流水号">流水号</div>
            <div id="close-button" onclick="closeButton1(this)" data-id="isSensitive" data-text="敏感布">敏感布</div>
        </div>
        <div id="popup-div2">
            <div id="close-button" onclick="closeButton1(this)" data-id="isLastPrint" data-text="***************">最后打印
            </div>
            <div id="close-button" onclick="closeButton1(this)" data-id="pmtId" data-text="生产单ID">生产单ID
            </div>
            <div id="close-button" onclick="closeButton1(this)" data-id="differentiateState" data-text="库存分机台">库存分机台
            </div>
            <div id="close-button" onclick="closeButton1(this)" data-id="IsTria" data-text="是否试纱">是否试纱
            </div>
        </div>
    </div>
    <div id="overlay"></div>
    <script src="custom_test/custom-etype-provider.js"></script>
    <script src="custom_test/custom-print-json.js"></script>
    <script src="custom_test/print-data.js"></script>
    <script src="polyfill.min.js"></script>
    <script src="plugins/jquery.minicolors.min.js"></script>
    <script src="plugins/JsBarcode.all.min.js"></script>
    <script src="plugins/qrcode.js"></script>
    <script src="hiprint.bundle.js"></script>
    <script src="plugins/jquery.hiwprint.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->

    <script>
        var tokens = sessionStorage.getItem('USER-TOKEN-KEY')
        let baseURL
        let host = window.location.host
        let reg = /^localhost+/
        if (reg.test(host)) {
            baseURL = 'http://localhost:8222/api'
        } else {
            baseURL = '/api'
        }
        const service = axios.create({
            baseURL,
            timeout: 10 * 60 * 1000,
            withCredentials: true, // 跨域请求时发送cookie
        })
        service.interceptors.response.use((res) => {
            return res.data
        })
        var post = (op) => {
            return service.post(op.url,
                op.data, {

                headers: {
                    token: tokens
                }
            }
            )
        }
        var hiprintTemplate
        $(document).ready(function () {
            $("#popup").hide()
            $("#overlay").hide()
            const paramsString = window.location.search
            const searchParams = new URLSearchParams(paramsString)

            const name = searchParams.get('name')
            if (name != 'NO') {
                var text1 = $('#inptText1').val(searchParams.get('modelName'))
                var text2 = $('#inptText2').val(searchParams.get('customName'))
            }
            //初始化打印插件
            hiprint.init({
                providers: [new customElementTypeProvider()]
            })
            hiprint.PrintElementTypeManager.buildByHtml($('.ep-draggable-item'))
            hiprintTemplate = new hiprint.PrintTemplate({
                template: name == "NO" ? customPrintJson : JSON.parse(name),
                settingContainer: '#PrintElementOptionSetting',
                paginationContainer: '.hiprint-printPagination'
            })
            //打印设计
            hiprintTemplate.design('#hiprint-printTemplate')

            $('#A4_preview').click(function () {
                $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate.getHtml([printData, printData, printData]))
                $('#myModal').modal('show')
            })
            $('#A4_directPrint').click(function () {
                hiprintTemplate.print([printData, printData, printData])
            })
            $('#A4_printByHtml').click(function () {
                hiprintTemplate.printByHtml($('#myModal .modal-body .prevViewDiv'))
            })
            $('#A4_getJson_toTextarea').click(function () {
                $('#A4_textarea_json').html(JSON.stringify(hiprintTemplate.getJson()))
                console.log(JSON.stringify(hiprintTemplate.getJson()))
                var text1 = $('#inptText1').val()
                var text2 = $('#inptText2').val()
                if (name != 'NO') {
                    post({
                        url: 'planSingle/clothfiyprintmodel/update',
                        data: [{
                            modelName: text1,
                            customName: text2,
                            modelDetail: JSON.stringify(hiprintTemplate.getJson()),
                            id: searchParams.get('id')
                        }]
                    }).then((res) => {
                        if (res.code == 200) {
                            alert('修改成功')
                        }
                    })
                } else {
                    post({
                        url: 'planSingle/clothfiyprintmodel/add',
                        data: [{
                            modelName: text1,
                            customName: text2,
                            modelDetail: JSON.stringify(hiprintTemplate.getJson()),
                        }]
                    }).then((res) => {
                        if (res.code == 200) {
                            alert('保存成功')
                        } else {
                            alert(res.message)
                        }
                    })
                }
            })
            $('#A4_getJson_toDesign').click(function () {
                hiprintTemplate = new hiprint.PrintTemplate({
                    template: JSON.parse($('#A4_textarea_json').val()),
                    settingContainer: '#PrintElementOptionSetting',
                    paginationContainer: '.hiprint-printPagination'
                })
                $('#hiprint-printTemplate').html('')
                hiprintTemplate.design('#hiprint-printTemplate')
            })
            $('#A4_getHtml_toTextarea').click(function () {
                $('#A4_textarea_html').val(hiprintTemplate.getHtml(printData)[0].outerHTML)
            })
            $("#close-button, #overlay").click(function () {
                $("#popup").hide()
                $("#overlay").hide()
            })
        })

        //调整纸张
        var setPaper = function (paperTypeOrWidth, height) {
            hiprintTemplate.setPaper(paperTypeOrWidth, height)
        }

        //旋转
        var rotatePaper = function () {
            hiprintTemplate.rotatePaper()
        }
        var clearTemplate = function () {
            hiprintTemplate.clear()
        }

        var selectTextClick = function () {
            $("#popup").show()
            $("#overlay").show()
        }

        var closeButton1 = function (e) {
            $('#qingSelectText').val(e.getAttribute("data-id"))
            $('#CsText').val(e.getAttribute("data-text"))
            $('.hiprint-option-item-submitBtn').click()
        }

    </script>

    <script>
        $(document).ready(function () {
            //设置左侧拖拽事件
            var hiprintTemplate_bill = new hiprint.PrintTemplate({
                template: JSON.parse($('#textarea_bill').val()),
                settingContainer: '#PrintElementOptionSetting'
            })
            //打印设计
            hiprintTemplate_bill.design('#hiprint-printTemplate_bill')

            $('#bill_preview').click(function () {
                $('#myModal .modal-body .prevViewDiv').html(hiprintTemplate_bill.getHtml(printData))
                $('#myModal').modal('show')
            })
            $('#bill_print').click(function () {
                hiprintTemplate_bill.print(printData)
            })
        });


    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#barcode_button_preview').click(function () {
                var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) })

                var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '13234567' }, { name: '黄波', barcode: '1224567' }, { name: '黄磊', barcode: '1234567' }, { name: '黄磊', barcode: '1234567' }, { name: '古丽娜', barcode: '7654321' }])

                $('#myModal .modal-body .prevViewDiv').html($html)
                $('#myModal').modal('show')
            })

            $('#barcode_button_print').click(function () {
                var barCodehiprintTemplate = new hiprint.PrintTemplate({ template: JSON.parse($('#textarea_barcode').val()) })

                var $html = barCodehiprintTemplate.getHtml([{ name: '黄山', barcode: '13234567' }, { name: '黄波', barcode: '1224567' }, { name: '黄磊', barcode: '1234567' }, { name: '黄磊', barcode: '1234567' }, { name: '古丽娜', barcode: '7654321' }])
                barCodehiprintTemplate.printByHtml($html)

            })
        })
    </script>

</body>

</html>